import React, { PropTypes } from 'react'
import { connect } from 'dva'
import { Button, Row, Form, Input, Alert } from 'antd'
import { config } from '../utils'
import styles from './Login.less'

const FormItem = Form.Item

const Login = ({children, location, dispatch, login, loading, form: {
  getFieldDecorator,
  validateFieldsAndScroll,
}}) => {
  const { logined, loginButtonLoading, message, user} = login

  function handleOk () {
    validateFieldsAndScroll((errors, values) => {
      if (errors) {
        return
      }
      dispatch({ type: 'login/login', payload: values })
    })
  }

  return (
    <div className={styles.form}>
      <div className={styles.logo}>
        <img alt={'logo'} src={config.logoSrc} />
        <span>Login</span>
      </div>

      <form>
        <FormItem hasFeedback>
          {getFieldDecorator('username', {
            rules: [
              {
                required: true,
                message: '请填写用户名',
              },
            ],
          })(<Input size="large" onPressEnter={handleOk} placeholder="用户名" />)}
        </FormItem>
        <FormItem hasFeedback>
          {getFieldDecorator('password', {
            rules: [
              {
                required: true,
                message: '请填写密码',
              },
            ],
          })(<Input size="large" type="password" onPressEnter={handleOk} placeholder="密码" />)}
        </FormItem>
        <Row>
          {
            logined?'':<Alert message={message} type="error" showIcon />
          }
        </Row>
        <Row>
          <Button type="primary" size="large" onClick={handleOk} loading={loginButtonLoading}>
            登录
          </Button>
        </Row>
        <p>
          <span>账号：guest</span>
          <span>密码：guest</span>
        </p>
      </form>
    </div>
  )
}
Login.propTypes = {
}
const loginForm = Form.create()(Login)
export default connect(({ login, loading }) => ({ login, loading: loading.models.app }))(loginForm)
